import { useState } from "react";
import _ from "lodash";
import classNames from "classnames";
import "./index.scss";

// 导航 Tab 数组
const tabs = [
  { type: "hot", text: "最热" },
  { type: "time", text: "最新" }
];

const Tab = (props) => {
  const { commentList, setcommentList } = props;
  const [type, setType] = useState("hot");
  const tabChangeHandler = (type) => {
    console.log(type);
    setType(type);
    // 基于tabs的排序
    if (type === "hot") {
      // 采用lodash对根据点赞数排序
      setcommentList(_.orderBy(commentList, ["like"], ["desc"]));
    } else {
      // 采用lodash根据创建时间排序
      setcommentList(_.orderBy(commentList, ["ctime"], ["desc"]));
    }
  };
  return (
    <div className="reply-navigation">
      <ul className="nav-bar">
        <li className="nav-title">
          <span className="nav-title-text">评论</span>
          {/* 评论数量 */}
          <span className="total-reply">{10}</span>
        </li>
        <li className="nav-sort">
          {/* 高亮类名： active */}
          {tabs.map((item) => (
            <span
              key={item.type}
              className={classNames("nav-item", {
                active: type === item.type
              })}
              onClick={() => tabChangeHandler(item.type)}
            >
              {item.text}
            </span>
          ))}
        </li>
      </ul>
    </div>
  );
};

export default Tab;
